<template>
  <div align="center">
    <h2>查看(待审批)</h2><br>
    <table>
      <tr>
        <td>
          <el-form-item label="合同标题：" style="font-size: 20px;float: right;">
            <el-input v-model="form.contracTitle" style="width: 300px;height: 40px;" placeholder="请输入合同标题" disabled />
          </el-form-item>
        </td>
        <td v-if="route.query.classify == '2'">
          <el-form-item label="货主单位：" style="font-size: 20px;float: right;">
            <el-input v-model="form.ownerUnit" style="width: 300px;height: 40px;" placeholder="请输入货主单位" disabled />
          </el-form-item>
        </td>
        <td v-if="route.query.classify == '3'">
          <el-form-item label="承运单位：" style="font-size: 20px;float: right;">
            <el-input v-model="form.carrierUnit" style="width: 300px;height: 40px;" placeholder="请输入承运单位" disabled />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td v-if="route.query.classify == '3'">
          <el-form-item label="承运负责人：" style="font-size: 20px;float: right;">
            <el-input v-model="form.carrierName" style="width: 300px;height: 40px;" placeholder="请输入承运负责人" disabled />
          </el-form-item>
        </td>
        <td v-if="route.query.classify == '2'">
          <el-form-item label="货主负责人：" style="font-size: 20px;float: right;">
            <el-input v-model="form.ownerName" style="width: 300px;height: 40px;" placeholder="请输入货主负责人" disabled />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="线路：" style="font-size: 20px;float: right;">
            <el-select v-model="form.line" style="width: 300px;height: 40px;" disabled>
              <el-option v-for="item in lines" :key="item.lineId" :label="item.lineName" :value="item.lineName" />
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="吨运价：" style="font-size: 20px;float: right;">
            <el-input v-model="form.freight" style="width: 300px;height: 40px;" placeholder="请输入吨运价" disabled />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="包车条件吨位：" style="font-size: 20px;float: right;">
            <el-input v-model="form.tonnage" style="width: 300px;height: 40px;" placeholder="请输入包车条件吨位" disabled />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="包车金额：" style="font-size: 20px;float: right;">
            <el-input v-model="form.charterAmount" style="width: 300px;height: 40px;" placeholder="请输入包车金额" disabled />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="经办人：" style="font-size: 20px;float: right;">
            <el-input v-model="form.handlingName" style="width: 300px;height: 40px;" placeholder="请输入经办人" disabled />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="签订时间：" style="font-size: 20px;float: right;">
            <el-date-picker v-model="form.signedTime" type="date" placeholder="请选择签订时间" disabled
              style="width: 300px;height: 40px;" value-format="YYYY-MM-DD" />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="合同金额：" style="font-size: 20px;float: right;">
            <el-input v-model="form.contractAmount" style="width: 300px;height: 40px;" placeholder="请输入合同金额" disabled />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-form-item label="合同标的或项目说明" style="font-size: 20px;width: 970px;height: 100px;float: right;">
            <el-input v-model="form.projectExplain" type="textarea" style="font-size: 20px;width: 970px;"
              disabled></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-form-item label="合同主要条款/边更条款" style="font-size: 20px;width: 970px;height: 100px;float: right;">
            <el-input v-model="form.projectArticle" type="textarea" style="font-size: 20px;width: 970px;"
              disabled></el-input>
          </el-form-item>
        </td>
      </tr>
      <td style="font-size: 20px;float: left;margin-left: 50px;margin-top: 25px;">合同文本(附件)：</td>
      <td style="float: left; margin-left: 30px;width: 200px;">
        <el-upload v-model:file-list="fileList" class="upload-demo"
          action="ContractRead/api/ReadContract/UpdateFile" disabled>
        </el-upload><br>
      </td>
      <tr>
        <td colspan="2">
          <el-form-item label="审批备注：" style="font-size: 20px;width: 970px;height: 100px;float: right;">
            <el-input v-model="form.remarks" type="textarea" style="font-size: 20px;width: 970px;"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <el-form-item label="转批人" style="width: 280px;">
          <el-select v-model="form.approvaName" placeholder="请选择转批负责人">
            <el-option v-for="item in tableUser" :label="item.name" :value="item.name" />
          </el-select>
    </el-form-item>
      </tr>
    </table>
    <tr align="center">
      <el-button type="primary" @click="onSubmit" style="width: 150px;height: 50px;">通过并转批</el-button>
      <el-button @click="Cancel()" style="width: 150px;height: 50px;">拒绝</el-button>
      <el-button type="success" @click="Approval" style="width: 150px;height: 50px;">通过并终止审批</el-button>
    </tr>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive } from 'vue'
import { ref } from 'vue'
const route = useRoute()
const form = reactive({
  contractNumber: 'HZ202010080122',
  contractId: route.query.contractId,
  contracTitle: '',
  //承运
  carrierName: '',
  carrierUnit: '',
  //货主
  ownerName:'',
  ownerUnit:'',
  line:'',
  signedTime:'',
  freight:'',
  tonnage:'',
  charterAmount:'',
  handlingName:'',
  contractAmount:'',
  projectExplain:'',
  projectArticle:'',
  contractFile:'',
  classify:route.query.classify,
  //备注
  remarks:'',
  //转批人
  approvaName:''
})
onMounted(() => {
  GetContracted()
  //线路下拉框
  GetAllline()
  //转批人
  GetUser()
})
//线路
const lines: any = ref([])
const GetAllline = () => {
  axios.get('FoundationRead/api/Foundation/GetLine', {
    params: {
      pageIndex: 1,
      pageSize: 10
    }
  }).then((ret) => {
    console.log(ret.data.data)
    lines.value = ret.data.data.plist
  })
}
//转批人
const tableUser:any=ref([]);
const GetUser=()=>{
  axios({
    method:"get",
    url:"http://47.96.109.219:5202/api/User/UserSelectShow"
  })
  .then(res=>{
    tableUser.value=res.data.data
  })
}
//货主合同查看详情
const GetContracted = () => {
  axios.get('ContractRead/api/ReadContract/GetContracted', {
    params: {
      contractId: form.contractId
    }
  }).then((ret) => {
    console.log(ret.data.data)
    form.contracTitle = ret.data.data.contracTitle
    form.ownerUnit = ret.data.data.ownerUnit
    form.ownerName = ret.data.data.ownerName
    form.line = ret.data.data.line
    form.freight = ret.data.data.freight
    form.tonnage = ret.data.data.tonnage
    form.charterAmount = ret.data.data.charterAmount
    form.signedTime = ret.data.data.signedTime
    form.handlingName = ret.data.data.handlingName
    form.contractAmount = ret.data.data.contractAmount
    form.projectExplain = ret.data.data.projectExplain
    form.projectArticle = ret.data.data.projectArticle
    localStorage.setItem('contractFile', ret.data.data.contractFile)
    kk()
    //承运
    form.carrierUnit = ret.data.data.carrierUnit
    form.carrierName = ret.data.data.carrierName
  })
}
const fileList = ref()
const kk = () => {
  const file = ref([
    {
      name: localStorage.getItem('contractFile'),
      url: 'ContractRead/Imge/' + localStorage.getItem('contractFile'),
    }
  ])
  fileList.value = file.value
}
import { ElMessage } from 'element-plus'
import router from '@/router';
import { useRoute } from 'vue-router';
//通过并转批
const onSubmit = () => {
  axios.get('Contract/api/Contract/UpdateState', {
    params: {
      contractId:form.contractId,
      contractStatus:1,
      remarks:form.remarks
    }
  }).then((ret) => {
    console.log(ret.data)
    if (ret.data.data == 1) {
      ElMessage.success('转批成功')
      if (form.classify == '2') {
        router.push('/OwnerApproval')
      }
      if (form.classify == '3') {
        router.push('/carrierApproval')
      }
    } else {
      ElMessage.error('转批失败')
    }
  })
}
//拒绝
const Cancel=() => {  
  axios.get('Contract/api/Contract/UpdateState', {
    params: {
      contractId:form.contractId,
      contractStatus:3,
      remarks:form.remarks
    }
  }).then((ret) => {
    console.log(ret.data)
    if (ret.data.data == 1) {
      ElMessage.success('拒绝成功')
      if (form.classify == '2') {
        router.push('/OwnerApproval')
      }
      if (form.classify == '3') {
        router.push('/carrierApproval')
      }
    } else {
      ElMessage.error('拒绝失败')
    }
  })
}
//通过并终止审批
const Approval=()=>{
  axios.get('Contract/api/Contract/UpdateState', {
    params: {
      contractId:form.contractId,
      contractStatus:2,
      remarks:form.remarks
    }
  }).then((ret) => {
    console.log(ret.data)
    if (ret.data.data == 1) {
      ElMessage.success('已通过审批')
      AddApprovalTrackRecord()
      if (form.classify == '2') {
        router.push('/OwnerApproval')
      }
      if (form.classify == '3') {
        router.push('/carrierApproval')
      }
    } else {
      ElMessage.error('通过失败')
    }
  })

}
//跟踪记录（审批合同）
const TrackRecord = reactive({
  "contractNumber": "",
  "header": "审批合同",
  "carrier": "",
  "phone": "13403931159",
})
//货主合同查看详情
//添加跟踪记录（审批合同）
const AddApprovalTrackRecord = () => {
  TrackRecord.contractNumber = form.contractNumber
  TrackRecord.carrier = form.ownerUnit
  axios.post("Contract/api/TrackRecord/AddApprovalTrackRecord", TrackRecord).then(res => {
    console.log(res.data)
  }).catch(err => {

  })
}


</script>

<style scoped></style>